<template>
	<coreshop-page bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" :placeholder="false" showLoginModalDom
		needLoadingPage :loadingPage="loadingPage">
		<view class="layout-goods-detail">
			<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
				:swiperBanner="state.swiperBanner" :goodsDetailContent="state.goodsDetailContent"
				:isCustomService="true" :isActivityGoods="true" :shareType=ShareEnum.serviceGoods>
				<template #countDown>
					<view class="time-box"
						v-if="(state.goodsDetailData.openStatus == ServiceGoodsOpenEnum.start || state.goodsDetailData.openStatus == ServiceGoodsOpenEnum.noStart) && state.goodsDetailData.timestamp > 0">
						<view class="title" v-if="state.goodsDetailData.openStatus == ServiceGoodsOpenEnum.start">仅剩时间：
						</view>
						<view class="title" v-if="state.goodsDetailData.openStatus == ServiceGoodsOpenEnum.noStart">
							距离开始：
						</view>
						<uv-count-down :time="state.goodsDetailData.timestamp * 1000" format="DD天HH时mm分ss秒" autoStart
							millisecond @change="onChange">
							<view class="time">
								<text class="time_item">
									{{ state.goodsDetailData?.timeData?.days }}
								</text>天
								<text class="time_item">
									{{ state.goodsDetailData?.timeData?.hours > 10 ?
                                        state.goodsDetailData?.timeData?.hours
                                        : '0' +
                                        state.goodsDetailData?.timeData?.hours }}
								</text>时
								<text class="time_item">
									{{ state.goodsDetailData?.timeData?.minutes }}
								</text>分
								<text class="time_item">
									{{ state.goodsDetailData?.timeData?.seconds }}
								</text>秒
							</view>
						</uv-count-down>
					</view>
				</template>
				<template #customService>
					<view class="layout-tag">
						<view class="level-box">
							<view class="title">兑换级别：</view>
							<view class="tag-box">
								<view class="tag" v-for="cell in state.goodsDetailData.allowedMemberships" :key="cell">
									<uv-tags :text="cell" plain size="mini"></uv-tags>
								</view>
							</view>
						</view>
						<view class="level-box">
							<view class="title">兑换门店：</view>
							<view class="tag-box">
								<view class="tag" v-for="cell in state.goodsDetailData.consumableStores" :key="cell">
									<uv-tags :text="cell" plain size="mini" type="success"></uv-tags>
								</view>
							</view>
						</view>
						<view class="level-box">
							<view class="title">有效期：</view>
							<view class="tag-box">
								{{ state.goodsDetailData.startTime }} 至 {{ state.goodsDetailData.endTime }}
							</view>
						</view>
					</view>
				</template>
			</GoodsDetail>

			<!-- 为您推荐 -->
			<GoodsDetailRecommend :queryParams="{ id: 10 }"></GoodsDetailRecommend>

			<!-- 底部 购买 -->
			<GoodsDetailBottomTabbar>
				<template #bottomTabbar>
					<view class="btn-box">
						<view class="buy-box" @click="handleBuyNow">
							<view class="buy">
								<view class="tit">立即购买</view>
							</view>
						</view>
					</view>
				</template>
			</GoodsDetailBottomTabbar>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline,onPullDownRefresh } from '@dcloudio/uni-app';
	import type { Response, ServiceGoodsType } from '@/core/models';
	import { queryServiceDetail, queryAddServiceOrder } from '@/core/api';
	import { ServiceGoodsOpenEnum, ShareEnum, PaymentTypeEnum, ShareClientEnum, ShareModelEnum, } from '@/core/enum';
	import { handleShowToast, handleRouteNavigateTo, getShareUrl } from '@/core/utils';
	import { useLoginStore } from '@/core/store';
	import { shareUrl } from '@/core/consts';
	import GoodsDetail from '@/pages/components/goods-detail/index.vue';
	import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
	import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
	import { useLoadingFn } from '@/core/hooks';

	interface QueryParams {
		id : number;
	}

	/** 登录store */
	const _useLoginStore = useLoginStore();

	const state = reactive<{
		id : number;
		goodsDetailData : ServiceGoodsType,
		swiperBanner : Array<string>;
		goodsDetailContent : string;
		shareUrl : string;
	}>({
		id: 0,
		goodsDetailData: {},
		swiperBanner: [],
		goodsDetailContent: "",
		shareUrl: "",
	});

	const loadingPage = ref(true);
	const handleGetGoodsDetail = useLoadingFn(getGoodsDetail, loadingPage);


	onLoad((query : QueryParams) => {
		state.id = query?.id;
		/** 获取商品详情 */
		handleGetGoodsDetail();
	});

	onPullDownRefresh(async () => {
		await handleGetGoodsDetail();
		uni.stopPullDownRefresh();
	});

	async function getGoodsDetail() {
		const goodsDetail : Response<ServiceGoodsType> = await queryServiceDetail({ id: state.id });
		if (goodsDetail.status) {
			state.goodsDetailData = {
				...goodsDetail.data,
				activityPrice: goodsDetail?.data?.money || 0,
				name: goodsDetail?.data?.title,
				brief: goodsDetail?.data?.description,
				stock: goodsDetail?.data?.amount,
				timeData: {
					days: 0,
					hours: 0,
					minutes: 0,
					seconds: 0,
				}
			}

			/** 商品轮播图 */
			state.swiperBanner = goodsDetail?.data?.thumbnail?.split(',');
			/** 商品详情内容 */
			state.goodsDetailContent = goodsDetail?.data?.contentBody;

			state.shareUrl = await getShareUrl({
				client: ShareClientEnum.wxMiNiProgram,
				url: shareUrl,
				type: ShareModelEnum.url,
				page: ShareEnum.serviceGoods,
				params: {
					serviceGoodsId: state.id,
				}
			})
		} else {
			handleShowToast(goodsDetail.msg)
		}
	}


	/** 时间倒计时 */
	const onChange = (e : any) => {
		state.goodsDetailData.timeData = e;
	}

	/** 立即购买 */
	const handleBuyNow = () => {
		_useLoginStore.checkLogin(async () => {
			const serviceOrder : Response<any> = await queryAddServiceOrder({ id: state.id });
			if (serviceOrder.status) {
				handleRouteNavigateTo(`/pages/order/pay/pay?orderId=${serviceOrder.data}&orderType=${PaymentTypeEnum.serviceOrder}&serviceId=${state.id}`);
			} else {
				handleShowToast(serviceOrder.msg)
			}
		})
	}

	/** 分享 */
	onShareAppMessage(() => {
		return {
			title: state.goodsDetailData.title,
			imageUrl: state.goodsDetailData.thumbnail,
			path: state.shareUrl
		}
	});
	onShareTimeline(() => {
		return {
			title: state.goodsDetailData.title,
			imageUrl: state.goodsDetailData.thumbnail,
			path: state.shareUrl
		}
	});
</script>
<style lang="scss" scoped>
	@import './detail.scss';
</style>